/*样式消除开始*/
body{
    margin: 0;
    padding: 0;
}
/*样式消除结束*/
/*容器准备开始*/
.container{
    margin: 0 auto;
    width: calc(80rem - 5px);
    margin-top: 5rem;
    display: flex;
    border-top: 1px solid gainsboro;
    border-left: 1px solid gainsboro;
}
.one-icon-container{
    position: relative;
    text-align: center;
    height: 20rem;
    width: 20rem;
    border-right: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}
/*容器准备结束*/

/*小箭头开始*/
:root{
    --icon-arrow-size: 10rem; /*设置箭头大小*/
    --icon-arrow-expand-deg: 8deg;  /*箭头扩张角度,该值*2得到真正的扩张角度*/
    --icon-arrow-color: black; /*设置箭头颜色*/
}
.icon-arrow{
    position: relative;
    width: var(--icon-arrow-size);
    height: var(--icon-arrow-size);
    left: 50%;
    top: 50%;
    transition: transform 0.3s ease;
}
.icon-arrow-right{
    transform: translate(-50%, -50%) rotate(-45deg);
}
.icon-arrow-bottom{
    transform: translate(-50%, -50%) rotate(45deg);
}
.icon-arrow-left{
    transform: translate(-50%, -50%) rotate(135deg);
}
.icon-arrow-top{
    transform: translate(-50%, -50%) rotate(-135deg);
}
.icon-arrow:before{
    content: '';
    position: absolute;
    width: 100%;
    height: calc(100% - 1px);
    border-bottom: 1px solid var(--icon-arrow-color);
    transform-origin: 100% 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(calc(var(--icon-arrow-expand-deg) * -1));
}
.icon-arrow:after{
    content: '';
    position: absolute;
    width: calc(100% - 1px);
    height: 100%;
    border-right: 1px solid var(--icon-arrow-color);
    transform-origin: 100% 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--icon-arrow-expand-deg));
}
/*小箭头结束*/
/*搜索开始*/
:root{
    --icon-search-size: 10rem; /*设置搜索图标整体大小*/
    --icon-search-rotate: -45deg; /*设置旋转角度*/
    --icon-search-height: 65%; /*设置柄的长度*/
    --icon-search-color: black; /*设置搜索图标颜色*/
}
.icon-search{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--icon-search-rotate));
    width: var(--icon-search-size);
    height: var(--icon-search-size);
}
.icon-search:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 1px solid var(--icon-search-color);
    border-radius: 100%;
}
.icon-search:after{
    content: '';
    position: absolute;
    width: 100%;
    height: var(--icon-search-height);
    border-right: 1px solid var(--icon-search-color);
    right: 50%;
    top: 100%;
}
/*搜索结束*/
/*交叉直线开始*/
:root{
    --icon-crossline-size: 10rem; /*设置交叉直线整体大小*/
    --icon-crossline-rotate: -45deg; /*设置旋转角度*/
    --icon-crossline-expand: -45deg; /*设置扩张角度*/
    --icon-crossline-color: black; /*设置交叉直线颜色*/
}
.icon-crossline{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--icon-search-rotate));
    width: var(--icon-search-size);
    height: var(--icon-search-size);
}
.icon-crossline:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 1px solid var(--icon-search-color);
    border-radius: 100%;
}
.icon-crossline:after{
    content: '';
    position: absolute;
    width: 100%;
    height: var(--icon-search-height);
    border-right: 1px solid var(--icon-search-color);
    right: 50%;
    top: 100%;
}
/*交叉直线结束*/
